import React, { useEffect, useState } from 'react'
import { View, } from '@tarojs/components'
import { useDidShow } from '@tarojs/taro'
import { reaction } from "mobx";
import { Observer, useLocalStore } from 'mobx-react-lite'
import { homeModel } from '@/model/HomeDataModel'
import { cartModel } from '@/model/CartModel'
import Cart from '@/components/Cart'
import GoodsScroll from './components/GoodsScroll';
import GoodsOne from './components/GoodsOne';
import GoodsTwo from './components/GoodsTwo';
import Footer from './components/Footer'
import { Header } from './components/Header'
import { Menu } from './components/Menu'
import Notice from './components/Notice'
import Lottery from './components/Lottery';
// import { SkeletonEle } from '@/components/Skeleton'


export default () => {

  const store = useLocalStore(() => homeModel);


  const cartStore: any = useLocalStore(() => cartModel)

  useDidShow(() => {
    store.getIsLogin();
    if (!store.isLogin) {
      cartStore.getConfig();
    }
    store.getData();
  });
  

  useEffect(() => {
    const reaction1 = reaction(
      () => ({ cartStoreItems: cartStore.items, storeData: store?.data }),
      ({ cartStoreItems, storeData }) => {
        if (cartStoreItems?.length > 0) {
          const detail = storeData;
          const cartIds = cartStoreItems.map((it: any) => it.goods_id);
          const setGoodsNum = (key = 'shopListOne') => {
            if (detail?.[key]?.strcutData?.length > 0) {
              const list = detail[key].strcutData;
              const res: any = list.map(it => {
                if (cartIds.includes(it.id)) {
                  const currentGoods = cartStoreItems.find((cart: any) => cart.goods_id === it.id);
                  return {
                    ...it,
                    number: currentGoods?.number ?? 0
                  }
                } else {
                  return it;
                }
              })
              if (key === 'shopListScroll') {
                store.setShopListScroll(res);
              }
              if (key === 'shopListOne') {
                store.setShopListOne(res);
              }
              if (key === 'shopListTwo') {
                store.setShopListTwo(res);
              }
            }
          }
          setGoodsNum('shopListOne');
          setGoodsNum('shopListScroll');
          setGoodsNum('shopListTwo');
        }
      }
    );
    return reaction1
  }, []);


  return (
    <Observer>
      {
        () => {
          return <View className='xxm-page' >
            <Header
              detail={store?.data}
              onLoad={() => {

              }}
              safeArea
            />
            {
              store?.data?.entry?.length > 0 && <Menu menus={store?.data.entry} />
            }
            {
              store?.data?.noticeList?.strcutData?.length > 0 && <Notice notice={store?.data.noticeList} />
            }
            {
              store?.shopListScroll?.length > 0 && <GoodsScroll items={store?.shopListScroll} title={store?.data?.shopListScroll?.layoutName} />
            }
            <Lottery lucky={store.lucky} />
            {
              store?.shopListOne?.length > 0 && <GoodsOne items={store?.shopListOne} title={store?.data?.shopListOne?.layoutName} />
            }
            {
              store?.shopListTwo?.length > 0 && <GoodsTwo items={store?.shopListTwo} title={store?.data?.shopListTwo?.layoutName} />
            }
            <Footer technical={store.attr.defaultValue} />
            {
              store.isLogin &&
              <Cart visible></Cart>
            }

          </View>

        }
      }
    </Observer>
  )
}
